<script lang="ts" setup>
import { useLocale } from '@/locale/locale';

defineProps<{
  fullName?: string;
  email?: string;
  phoneNumber?: string;
  countryPrefix?: string;
}>();

const { t } = useLocale();
</script>

<template>
  <apt-section :title="t('LRKey_reservationDetail')" custom-style="margin-bottom: 20rpx">
    <view class="flex items-center">
      <view class="order-details__booker-label">
        {{ t('LRKey_guestName') }}
      </view>
      <view class="order-details__booker-value">
        {{ fullName }}
      </view>
    </view>
    <view class="order-details__booker-divider"></view>
    <view class="flex items-center">
      <view class="order-details__booker-label">
        {{ t('LCKey_mobile') }}
      </view>
      <view class="order-details__booker-value">
        {{ `${countryPrefix} ${phoneNumber}` }}
      </view>
    </view>
    <view class="order-details__booker-divider"></view>
    <view class="flex items-center">
      <view class="order-details__booker-label">
        {{ t('LCKey_email') }}
      </view>
      <view class="order-details__booker-value">
        {{ email }}
      </view>
    </view>
  </apt-section>
</template>

<style>
.order-details__booker-label {
  margin-right: 100rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #adaeb0;
}

.order-details__booker-value {
  flex: 1;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #3d3d3d;
}

.order-details__booker-divider {
  margin: 32rpx 0;
  height: 2rpx;
  background-color: #f4f4f4;
}
</style>
